<template>
	<view class="scan-input-form-item-compontent">
		<view class="p-form-label" v-if="label"><text v-if="required" class="required-tag">*</text>{{label}}：</view>
		<view class="input-row">
			<view class="mask" @tap.stop="" v-if="disabled"></view>
			<view class="input-view">
				<u--input 
					:clearable="clearable"
					border="none"
					:type="type"
					:placeholder="placeholder" 
					v-model.trim="innerValue"
					@clear="onClear"
					@blur="onBlur"
					@confirm="onConfirm"
				/>
			</view>
			<view class="scan-view" v-if="hasScan">
				<view @tap.stop="onScan"><u-icon name="scan" color="#F18201" :size="32"></u-icon></view>
			</view>
			<view class="btn-view" v-if="hasSearch">
				<view class="search-btn" @tap.stop="onSearch">搜</view>
			</view>
		</view>
		<view class="msg-row" v-if="msg" :class="[msgType==='info'?'info-type':'']">{{msg}}</view>
	</view>
</template>

<script>
export default {
	name:'ScanInputFormItemCompontent',
	emits:['input','search','clear','blur','confirm','change'],
	props:{
		type:{
			type:String,
			default:'text'
		},
		label:{
			type:String,
			default:''
		},
		placeholder:{
			type:String,
			default:'请输入...'
		},
		msg:{
			type:String,
			default:''
		},
		msgType:{
			type:String,
			default:'error'
		},
		value:{
			type:[String,Number,null],
			default:''
		},
		hasScan:{
			type:Boolean,
			default:true
		},
		hasSearch:{
			type:Boolean,
			default:true
		},
		disabled:{
			type:Boolean,
			default:false
		},
		clearable:{
			type:Boolean,
			default:true
		},
		required:{
			type:Boolean,
			default:false
		}
	},
	data(){
		return {
			innerValue:''
		}
	},
	watch:{
		value(newVal,oldVal){
			if (newVal!==this.innerValue) {
				this.innerValue = newVal
			}
		},
		innerValue(newVal,oldVal){
			if (newVal!==this.value) {
				this.$emit('input',newVal)
				this.$emit('change',newVal)
			}
		}
	},
	methods:{
		onScan(){
			uni.scanCode({
				success:(res)=>{
					this.innerValue = res.result;
				},
				fail:function(){
					console.log('scanCode fail')
				}
			})
		},
		onSearch(){
			this.$emit('search',this.innerValue)
		},
		onClear(){
			this.innerValue = null;
			this.$emit('clear')
		},
		onBlur(){
			this.$emit('blur',this.innerValue)
		},
		onConfirm(){
			this.$emit('confirm',this.innerValue)
		}
	},
	created() {
		this.innerValue = this.value
	}
}
</script>

<style scoped lang="scss">
.scan-input-form-item-compontent{
	width: 100%;
	.p-form-label{
		font-size: 32rpx;
		color: $u-tips-color;
		padding-bottom: 12rpx;
		padding-left: 20rpx;
		.required-tag{
			color:$u-error;
		}
	}
	.input-row{
		width: 100%;
		height: 90rpx;
		overflow: hidden;
		background-color: $uni-bg-color;
		display: flex;
		align-items: center;
		position: relative;
		.scan-view,.btn-view{
			flex-shrink: 0;
		}
		.scan-view{
			display: flex;
			align-items: center;
			justify-content: center;
			padding-right: 10rpx;
		}
		.input-view{
			flex-grow: 1;
			padding-left: 20rpx;
		}
		.btn-view{
			width:70rpx;
			height: 100%;
			padding: 20rpx;
			padding-left: 0rpx;
			box-sizing: border-box;
			.search-btn{
				height: 100%;
				width: 100%;
				border-radius: 8rpx;
				background: linear-gradient(157.342820970935deg, rgba(194, 128, 255, 1) -20%, rgba(194, 128, 255, 1) -19%, rgba(132, 0, 255, 1) 119%);
				display: flex;
				align-items: center;
				justify-content: center;
				color: $uni-bg-color;
				font-size: 26rpx;
			}
		}
		&>.mask{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 100;
			background-color: #000;
			opacity: 0.25;
		}
	}
	.msg-row{
		padding: 6rpx 20rpx 0 20rpx;
		line-height: 1.3;
		font-size: 24rpx;
		color: $u-error;
		word-break:break-all;
		word-wrap:break-word;
		&.info-type{
			color:$color-blue;
		}
	}
}
</style>